<template>
  <div>
    <a-form ref="baseForm" :model="baseData">
      <a-table rowKey="index" bordered size="small" :dataSource="baseData" :columns="operateColumns" :pagination="false" class="form-table">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'lineId'">
            <span class="text-red">*</span>{{ $t('other.processLine') }}
          </template>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'createTime'">
            <span>{{record.createTime}}</span>
          </template>

          <template v-if="column.key === 'lineId'">
            <span v-if="props.isDetails">{{record.lineId}}</span>
            <a-form-item v-else :name="[index, 'lineId']" :rules="{ required: true, message: $t('other.selectLine')}">
              <a-select v-model:value="record.lineId" :placeholder="$t('common.pleaseSelect')" :disabled="props.operateType == 'details' " @change="() => emits('onSelectChange')">
                <a-select-option v-for="item in  props.lineList" :key="item.key" :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </template>
          <template v-if="column.key === 'userNum'">
            <span v-if="props.isDetails">{{record.lineId}}</span>
            <a-form-item v-else :name="[index, 'lineId']" :rules="{ required: true, message: $t('other.selectLine')}">
             <span>{{( props.personList||[]).length }} / {{( props.stationList||[]).length }} </span>
            </a-form-item>
          </template>

        </template>
      </a-table>
    </a-form>

  </div>
</template>
<script setup name="makeDetailTable">
import { cloneDeep } from 'lodash'
import { ref, watch } from 'vue'
import { operateColumns } from './config'
let baseData = ref([])
let baseForm = ref()
let emits = defineEmits(['onSelectChange'])
const props = defineProps({
  stationList: { type: Array, default: () => [] },
  personList: { type: Array, default: () => [] },
  lineList: { type: Array, default: () => [] },
  tableData: { type: Array, default: () => [] },
  isDetails: { type: Boolean, default: () => false },
  operateType: { type: String, default: () => '' }
})
watch(
    () => props.tableData,
    (newVal) => {
      baseData.value = cloneDeep(newVal)
      // console.log(baseData.value)
    },
    { deep: true, immediate: true }
)
defineExpose({
  baseForm,
  baseData,
})
</script>
